// 登陆组件
import React, { Component } from 'react'
import './style/Logininfo.scss'
import qrcode from '../../assets/image/qrcode.png'
// 小图标
import {PersonIcon,KeyIcon} from '@primer/octicons-react'
export default class Logininfo extends Component {
  constructor(props){
    super(props)
    this.state={
      // 账号
      account:'',
      // 密码
      adminPwd:''
    }
  }
  /**
   * 设置表单元素值
   */
  setFromValue = (e) => {
    this.setState({
      [e.target.name]:e.target.value
    })
  }
  submitSigUpInfo = (e) => {
    e.preventDefault();
    // 将表单数据转换为查询参数格式
    const params = new URLSearchParams();
    params.append('account',this.state.account);
    params.append('adminPwd',this.state.adminPwd);
    // 请求登录接口
    React.axios.post(`/store-manage/gw1901/admin_sign-in.php`,params).then(res => {
      // console.log(res.data.nickname);
      // 通过会话存储设置昵称
      sessionStorage.setItem('nickname',res.data.nickname)
      // 如果包含登录成功的文本，则跳转到“管理首页”
      // 成功则返回一个对象object
      // 失败则返回一个字符串
      if(typeof(res.data)==="object"){
        // 请求获取用户名的接口
        // React.axios.get(`/store-manage/gw1901/admin_nickname.php?account=${this.props.account}`).then(res => {
          
          
          // 执行跳转到管理首页的方法
          this.props.Orthos()
        // });
      }
      // 提示服务器返回错误
      else {
        alert(res.data)
      }
    })
  }
    render() {
        return (
           
      <form
      autoComplete="off"
      onSubmit={this.submitSigUpInfo}
      >
        <div className="landing">
{/* 输入账号密码区域 */}
        <div className="landing_left">
{/* 输入账号 */}
          <div>
            <label htmlFor=""><PersonIcon size={24} /></label>
            <input 
              name="account"
              onChange={this.setFromValue}
              type="text" 
              placeholder="请输入管理员账号或手机号" />
          </div>
{/* 输入密码 */}
          <div>
           <label htmlFor=""><KeyIcon size={24} /></label> 
           <input
              name="adminPwd" 
              onChange={this.setFromValue}
              type="text" 
              placeholder="请输入管理员密码" 
               />
          </div>
          <p>
          还没有账号，要不 <button onClick={this.props.Switchover}>注册</button> 一个？
          </p>
{/* 登录按钮 */}
          <button 
          type="submit" 
          id="btnlog"
          className="btn btn-primary btn-lg btn-block"
          // onClick={this.props.Orthos}
          >登陆系统</button>
        </div>
{/* 关注我们 */}
        <div className="landing_right">
          <p>关注我们的企业微信公众号获取最新企业咨询</p>
{/* 二维码 */}
          <img src={qrcode} alt="加载中......"/>
        </div>
      </div>
      </form> 
            
        )
    }
}
